<template>
	<view class="particulars">
		<view class="carousel">
			<view class="">
				<uni-swiper-dot :info="info" :current="current" field="content">

					<swiper class="carousel_swiper_box" @change="change">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<img class="carouselimg" :src="item" alt="" />
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
		</view>

		<view class="gods_name">{{godslist.name}}</view>


		<view class="gods_list" v-for="(item,index) in godslist.goodsInfoList" :key="index">
			<view class="item-image">
				<img class="item-image_img" :src="item.icon" alt="" />
			</view>
			<view class="item-content">
				<view class="item-name">
					{{item.name}}
				</view>
				<view class="item-price">
					{{item.salePrice}}
					<view class="item-tetx">
						{{item.facePrice}}
					</view>
				</view>
			</view>
				<button class="item-btn" @click="handleBuy(godslist.lowestPriceGoodsId)">立即购买</button>
		</view>
	
		<!-- 详情展示 -->
		<view class="detail-desc">
			<view class="detail-desc_text">
				详情展示
			</view>
			<view class="title" style="padding: 12px 0;" v-html="godslist.instructions">
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,

	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		goodsbyitem
	} from '@/common/js/api.js'
	const app = getApp()
	const current = ref(0)
	const mode = ref('round')
	const usid = ref('')


	onLoad((options) => {
		usid.value = options.id
		goodslist(usid)
	})

	const info = ref([])
	const godslist = ref([])
	const godslistdata = ref([])

	const goodslist = (id) => {
		const obj = reactive({
			itemId: id.value,
			tagId: ''
		})
		goodsbyitem({
			...obj
		}).then((res) => {
			godslist.value = res.data
			info.value = res.data.sliderImage
		})
	}
	const change = (e) => {
		current.value = e.detail.current;
	}
	const handleBuy = (id) => {
		// 跳转到购买页面
		console.log('123',id)
		uni.navigateTo({
			url: '/pages/particulars/createOrder?id='+id 
		});
		
	}
</script>
<style scoped  lang="scss">
	page{
			background-color: #fff;
	}
	.carousel {
		height: 361px;
		position: relative;
		background-color: #f1f1f1;
	}

	.carousel_swiper_box {
		height: 361px;
	}

	.carouselimg {
		width: 100%;
		height: 100%;
	}

	.dotsStyles {
		color: #000;
		width: 100px;
	}


	.gods_name {
		font-weight: bold;
		font-size: 18px;
		padding: 10px 12px;
		
	}

	.gods_list {
		width: 648rpx;
		margin: 20rpx auto;
		padding: 0 20rpx;
		border-radius: 20rpx;
		border: 1px solid #E5E7EB;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.item-image {
		width: 108rpx;
		height: 108rpx;
		margin: 40rpx 0;
	}

	.item-image_img {
		width: 100%;
		height: 100%;
	}

	.item-content {

		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1;
	}

	.item-btn {
		padding: 0 16rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #EA1D62;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
		border-radius: 30rpx;
	}

	.item-price {
		
		font-size: 40rpx;
		font-weight: 700;
		color: #EA1D62;
		display: flex;
		align-items: baseline;
	}

	.item-tetx {
		font-size: 24rpx;
		font-weight: 400;
		color: #999999;
		text-decoration: line-through;
		margin-left: 20rpx;
	}
	.detail-desc{
		padding:  28rpx 34rpx;
	}
	.detail-desc_text{
		    font-size: 28rpx;
		    font-weight: bold;
		    color: #EA1D62;
	}
</style>